<template>
  <a-form
    class="form"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    :model="formData"
    :rules="rules"
    @finish="onFinish"
  >
    <a-form-item name="packageLockPath" label="package-lock">
      <path-input v-model:value="formData.packageLockPath" type="file" :extensions="['json']" />
    </a-form-item>
    <a-form-item name="repositoryDir" label="仓库目录">
      <path-input v-model:value="formData.repositoryDir" />
    </a-form-item>
    <a-form-item name="mirror" label="镜像源">
        <mirror-inpupt :mirrors="npmMirrors" v-model:mirror="formData.mirror" />
      </a-form-item>
    <a-form-item :wrapper-col="{ span: 8, offset: 8 }">
      <a-button type="primary" style="width: 100%" html-type="submit">下载</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue'
import {npmMirrors} from '@/common/default'

defineProps({
  loading: Boolean
})

const emit = defineEmits(['finish'])

const rules = {
  packageLockPath: [
    {
      required: true,
      message: '无效的路径',
      trigger: 'blur',
      validator: async (rule, val) => {
        const result = await window.electronAPI.isValidPath(val)
        return result ? Promise.resolve() : Promise.reject()
      }
    }
  ],
  repositoryDir: [
    {
      required: true,
      message: '无效的路径',
      trigger: 'blur',
      validator: async (rule, val) => {
        const result = await window.electronAPI.isValidPath(val)
        return result ? Promise.resolve() : Promise.reject()
      }
    }
  ],
  mirror: [
    {
      required: true,
      message: '请填写镜像源',
      trigger: 'blur',
      validator: (rule, mirror) => {
        return mirror.url ? Promise.resolve() : Promise.reject()
      }
    }
  ],
}

const formData = reactive({
  packageLockPath: '',
  repositoryDir: '',
  mirror: npmMirrors[0]
})

const onFinish = (values) => {
  emit('finish', values)
}
</script>

<style scoped>
.form {
  width: 100%;
}
</style>
